<template>
	<view class="">
		<view class="table-title" style="">
			<view class="label">姓名</view>
			<view style="width: 120px;">工人注冊證號</view>
			<view class="label">工種/職務</view>
			<view class="label">所屬單位</view>
		</view>
		<view class="table-content" v-for="(item, index) in hkAttendancePersonDownloads"
			:key="index" :class="(index + 1) % 2 === 0 ? 'row' : ''">
			<view class="label">{{item.personName}}</view>
			<view style="width: 120px;">{{item.cardNo }}</view>
			<view class="label">{{item.jobTitle}}</view>
			<view class="label">{{item.affiliatedUnit}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hkAttendancePersonDownloads: [
				    {
				        "affiliatedUnit": "",
				        "cardNo": "cw123456",
				        "hapId": 2,
				        "jobTitle": "安全员",
				        "personName": "张三"
				    }
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-title {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		// border: 1px solid;
		text-align: center;
		border-bottom: none;
		background: #F5F7FA;
		font-weight: 500;
		font-size: 14px;
		color: #445469;
		padding: 8px 0;
		.label {
			// border-right: 1px solid;
		}
	}
	
	.table-content {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		// border: 1px solid;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		font-size: 14px;
		color: #445469;
		padding: 8px 0;
	}
	.table-content.row {
		background: #F5F7FA;
	}
</style>